<template>
  <div class="theme-toggle">
    <!-- 简单切换按钮 -->
    <button
      v-if="mode === 'simple'"
      class="inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
      :title="isDark ? t('settings.appearance.themeLight') : t('settings.appearance.themeDark')"
      @click="themeStore.toggleTheme()">
      <i :class="isDark ? 'i-mdi-weather-sunny' : 'i-mdi-weather-night'" class="h-5 w-5" />
    </button>

    <!-- 下拉菜单模式 -->
    <div v-else-if="mode === 'dropdown'" class="relative">
      <button
        class="inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
        :title="getThemeLabel(themeStore.currentTheme)"
        @click.stop.prevent="showDropdown = !showDropdown">
        <i :class="getThemeIcon(themeStore.currentTheme)" class="h-5 w-5" />
        <i class="i-mdi-chevron-down ml-1 h-3 w-3" />
      </button>

      <!-- 下拉菜单 -->
      <div
        v-if="showDropdown"
        class="absolute right-0 mt-2 w-48 rounded-md border bg-popover p-1 shadow-md"
        @click.stop>
        <button
          v-for="theme in themes"
          :key="theme.value"
          class="flex w-full items-center rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer"
          :class="{ 'bg-accent text-accent-foreground': themeStore.currentTheme === theme.value }"
          @click.stop.prevent="selectTheme(theme.value)">
          <i :class="theme.icon" class="mr-2 h-4 w-4" />
          {{ t(theme.labelKey) }}
          <i v-if="themeStore.currentTheme === theme.value" class="i-mdi-check ml-auto h-4 w-4" />
        </button>
      </div>
    </div>

    <!-- 按钮组模式 -->
    <div v-else-if="mode === 'group'" class="inline-flex rounded-md border">
      <button
        v-for="(theme, index) in themes"
        :key="theme.value"
        class="px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
        :class="[
          themeStore.currentTheme === theme.value
            ? 'bg-primary text-primary-foreground'
            : 'bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
          index === 0 ? 'rounded-l-md' : '',
          index === themes.length - 1 ? 'rounded-r-md' : '',
          index > 0 ? 'border-l' : ''
        ]"
        :title="t(theme.labelKey)"
        @click="selectTheme(theme.value)">
        <i :class="theme.icon" class="h-4 w-4" />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ThemeMode } from '@shared/types.d';
import { computed, onMounted, onUnmounted, ref } from 'vue';

import { t } from '@/i18n';
import { useThemeStore } from '@/stores/theme';

interface Props {
  mode?: 'simple' | 'dropdown' | 'group';
}

withDefaults(defineProps<Props>(), {
  mode: 'simple'
});

const themeStore = useThemeStore();
const showDropdown = ref(false);

// 主题选项
const themes = [
  {
    value: ThemeMode.light,
    labelKey: 'settings.appearance.themeLight',
    icon: 'i-mdi-weather-sunny'
  },
  {
    value: ThemeMode.dark,
    labelKey: 'settings.appearance.themeDark',
    icon: 'i-mdi-weather-night'
  },
  {
    value: ThemeMode.auto,
    labelKey: 'settings.appearance.themeAuto',
    icon: 'i-mdi-theme-light-dark'
  }
];

// 计算属性
const isDark = computed(() => themeStore.isDark);

// 方法
const selectTheme = async (theme: ThemeMode) => {
  console.log('selectTheme', theme);
  await themeStore.setTheme(theme);
  showDropdown.value = false;
};

const getThemeIcon = (theme: ThemeMode) => {
  const themeMap = {
    [ThemeMode.light]: 'i-mdi-weather-sunny',
    [ThemeMode.dark]: 'i-mdi-weather-night',
    [ThemeMode.auto]: 'i-mdi-theme-light-dark'
  };
  return themeMap[theme] || 'i-mdi-theme-light-dark';
};

const getThemeLabel = (theme: ThemeMode) => {
  const themeMap = {
    [ThemeMode.light]: t('settings.appearance.themeLight'),
    [ThemeMode.dark]: t('settings.appearance.themeDark'),
    [ThemeMode.auto]: t('settings.appearance.themeAuto')
  };
  return themeMap[theme] || t('settings.appearance.themeAuto');
};

// 点击外部关闭下拉菜单
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as Element;
  if (!target.closest('.theme-toggle')) {
    showDropdown.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.theme-toggle {
  @apply relative;
}

/* 过渡动画 */
.theme-toggle button {
  transition: var(--transition-theme);
}
</style>
